<template>
	<view class="opeAStore">
		<image class="image" src="/static/img/index/37.png" mode="widthFix"></image>
		<!-- <view class="top">
			<image class="left" src="/static/img/icon_return.png" mode="widthFix"></image>
			<text class="topText">开通店铺</text>
			<view class="right">
				
			</view>
		</view> -->
		<NavBar>
			<template #center>
				<text class="topText">开通店铺</text>
			</template>
		</NavBar>
		<view class="bot">
			<image class="topImg" src="/static/img/index/42.png" mode="widthFix"></image>
			<view class="botList">
				<view class="listItem">
					<image class="listItem_1" src="/static/img/index/39.png" mode="widthFix"></image>
					<image class="listItem_2" src="/static/img/index/43.png" mode="widthFix"></image>
					<text class="text_1" >提交资料</text>
					<text class="text_2">第一步</text>
				</view>
				<image class="listItem_3" src="/static/img/index/47.png" mode="widthFix"></image>
				<view class="listItem">
					<image class="listItem_1" src="/static/img/index/40.png" mode="widthFix"></image>
					<image class="listItem_2" src="/static/img/index/44.png" mode="widthFix"></image>
					<text class="text_1">平台审核</text>
					<text class="text_2">第二步</text>
				</view>
			</view>
			<view class="botList">
				<view class="listItem" style="margin-left: 150rpx;">
					<image class="listItem_1"  src="/static/img/index/41.png" mode="widthFix"></image>
					<image class="listItem_2"  src="/static/img/index/45.png" mode="widthFix"></image>
					<text class="text_1">入驻完成</text>
					<text class="text_2">第三步</text>
				</view>
				<!-- <image class="listItem_3" src="/static/img/index/47.png" mode="widthFix"></image>
				<view class="listItem">
					<image class="listItem_1"  src="/static/img/index/38.png" mode="widthFix"></image>
					<image class="listItem_2"  src="/static/img/index/46.png" mode="widthFix"></image>
					<text class="text_1">交保证金</text>
					<text class="text_2">第四步</text>
				</view> -->
			</view>
			<text @click="navTo('/pages/principalType/index')" class="bot_text">立即开启</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import NavBar from '@/components/navBar.vue'
const navTo=(url:string)=>{
		uni.redirectTo({
			url
		})
	}
</script>

<style lang="scss">
	:deep(.navBarTop){
		background: transparent!important;
	}
.opeAStore{
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background: #F4F6FA;
	>.image{
		width: 100%;
		position: absolute;
		height: 1135rpx;
		top: 0;
		left: 0;
	}
	.topText{
		background:#6B64D3;
		width: 190rpx;
		display: inline-block;
		line-height: 56rpx;
		color: #fff;
		border-radius: 56rpx;
		text-align: center;
	}
	>.bot{
		position: relative;
		z-index: 9;
		width: 702rpx;
		margin: 0 auto;
		margin-top: 44rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 48rpx 0 64rpx 0;
		background: rgba(253, 250, 255, 0.70);
		border-radius: 32rpx;
		border: 2rpx solid #FFFFFF;
		.topImg{
			width: 361rpx;
		}
		.botList{
			width: 450rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			margin-top: 24rpx;
			.listItem_3{
				width: 48rpx;
			}
			.listItem{
				display: flex;
				align-items: center;
				flex-direction: column;
				.listItem_1{
					width: 160rpx;
				}
				.listItem_2{
					width: 57rpx;
					position: relative;
					bottom: -20rpx;
					margin-top: 10rpx;
				}
				.text_1{
					font-size: 28rpx;
					color: #262626;
				}
				.text_2{
					font-size: 24rpx;
					margin-top: 10rpx;
					color: #8C8C8C;
				}
				
			}
		}
		.bot_text{
			width: 560rpx;
			line-height: 88rpx;
			border-radius: 88rpx;
			text-align: center;
			font-size: 32rpx;
			margin-top: 32rpx;
			color: #fff;
			background: #6B64D3;
		}
	}
}
</style>